<template>
  <div class="quarter panel">
    <div class="inner">
      <h3>一季度销售进度</h3>
      <div class="chart">
        <div class="box">
          <div class="gauge" id="gauge"></div>
          <div class="label">75<small> %</small></div>
        </div>
        <div class="data">
          <div class="item">
            <h4>1,321</h4>
            <span>
              <i class="icon-dot" style="color: #6acca3"></i>
              销售额(万元)
            </span>
          </div>
          <div class="item">
            <h4>150%</h4>
            <span>
              <i class="icon-dot" style="color: #ed3f35"></i>
              同比增长
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { quartOption } from "./options/quartOption";
export default {
  data() {
    return {
      myChart: null,
    };
  },
  mounted() {
    this.render("gauge", quartOption);
  },
  methods: {
    render(id, option) {
      var chartDom = document.getElementById(id);
      var myChart = this.$echarts.init(chartDom);
      option && myChart.setOption(option);
      window.addEventListener("resize", function() {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
      });
      return myChart;
    },
  },
};
</script>

<style scoped>
.quarter {
  flex: 1;
  height: 2.9rem;
}
/* 季度区块 */
.quarter .inner {
  display: flex;
  flex-direction: column;
  margin: 0 -0.075rem;
}
.quarter .chart {
  flex: 1;
  padding-top: 0.225rem;
}
.quarter .box {
  position: relative;
}
.quarter .label {
  transform: translate(-50%, -30%);
  color: #fff;
  font-size: 0.375rem;
  position: absolute;
  left: 50%;
  top: 50%;
}
.quarter .label small {
  font-size: 50%;
}
.quarter .gauge {
  height: 1.05rem;
}
.quarter .data {
  display: flex;
  justify-content: space-between;
}
.quarter .item {
  width: 50%;
}
.quarter h4 {
  color: #fff;
  font-size: 0.3rem;
  margin-bottom: 0.125rem;
}
.quarter span {
  display: block;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #4c9bfd;
  font-size: 0.175rem;
}
</style>
